import React, { memo,Component,lazy,Suspense } from 'react'
import {baseUrl} from '../../assets/baseUrl'
import { Spin,Badge } from 'antd'
import {withRouter,Route,Switch} from "react-router-dom";
import Marquee from 'react-fast-marquee';
import { StudentInfo } from '../../utils/model';
import $ from 'jquery'
import './index.css'

const Permission = lazy(() => import('./permission')) //权限指派
const Personalization = lazy(() => import('./personnalSet')) //个性化设置
const classPermission = lazy(()=> import('./classPermission')) //班级权限指派
const schoolPermission = lazy(()=> import('./schoolPermission')) //班级权限指派
const pictureMonitor = lazy(()=> import('./pictureMonitor')) //图片中转监控
const PrizeBackStage = lazy(()=> import('./prizeBackStage')) //奖项管理后台
const BaseUrl = baseUrl()
const ClassManage=lazy(()=> import('./classManage')) //班级管理
class setting extends Component{
    static contextType = StudentInfo
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            studentId: null,
            schoolLevel: null
        }
    }
    ChangeHistory=(url)=>{
        // this.props.history.push(url);
    }
    componentDidMount(){
        const module = this.props.location.pathname.split('/')[3]
        console.log(this.context?.studentInfo);
        this.setState({
            studentId: this.context?.studentInfo?.studentId,
            schoolLevel:this.context?.studentInfo?.schoollevel
        },()=>{
            /* 页面刷新--设置左侧选择高亮 */
        if(module !== 'permission'){
            $('.options').removeClass('select-on')
            switch(module) {
                case 'personnalSet': $('.options').eq(1).addClass('select-on')
            }
        }

        /* 监听切换左侧模块时 模块高亮随之切换 */
        $('.options').on('click',function(e){
            $(this).addClass('select-on').siblings().removeClass('select-on')
        })
        })
        
    }

    render(){
        const {studentId,schoolLevel} = this.state
        return (
            <Suspense fallback={
                <Spin tip="Loading...">
                    <div style={{ height: 500 }}></div>
                </Spin>
                }>
                <div className='flex' style={{position:'relative'}}>
                    <Spin spinning={this.state.loading}  size="large">
                        <div className='setting-left-options'>
                            <div className="options select-on" onClick={()=>{this.props.history.push('/home/setting/permission');}}>
                                <div className="option-text quanxianzhipai">
                                    权限指派
                                </div>
                            </div>
                            <div className="options" onClick={()=>{this.props.history.push('/home/setting/personnalSet');}}>
                                <div className="option-text gexingshezhi">
                                    个性化设置
                                </div>
                            </div>
                            { studentId == 64234497 && <div className="options" onClick={()=>{this.props.history.push('/home/setting/pictureMonitor');}}>
                                <div className="option-text jiankong">
                                    图片中转监控
                                </div>
                            </div>}
                            { studentId == 64234497 && <div className="options" onClick={()=>{this.props.history.push('/home/setting/pictureMonitor');}}>
                                <div className="option-text jiankong">
                                    系统日志
                                </div>
                            </div>}
                            {schoolLevel?.split(',').includes('100') && <div className="options" onClick={()=>{this.props.history.push('/home/setting/prizeBackStage');}}>
                                <div className="option-text gexingshezhi">
                                    奖项管理后台
                                </div>
                            </div>}
                            {schoolLevel?.split(',').includes('101') && <div className="options" onClick={()=>{this.props.history.push('/home/setting/classManage');}}>
                                <div className="option-text gexingshezhi">
                                班级管理
                                </div>
                            </div>}
                        </div>
                    </Spin>
                    <Switch>
                        
                        <Route exact path="/home/setting/permission" component={Permission} />
                        <Route exact path="/home/setting/permission/classPermission" component={classPermission} />
                        <Route exact path="/home/setting/permission/schoolPermission" component={schoolPermission} />
                        
                        <Route exact path="/home/setting/personnalSet" component={Personalization} />
                        <Route exact path="/home/setting/pictureMonitor" component={pictureMonitor} />
                        <Route exact path="/home/setting/prizeBackStage" component={PrizeBackStage} />
                        <Route exact path="/home/setting/classManage" component={ClassManage} />
                    </Switch>
                </div>
            </Suspense>
        )
    }
}
export default withRouter(setting)